<!--<template>
	<view>
		<my-navbar></my-navbar>
		<view class="warp">
				<u-tabs-swiper ref="uTabs" :list="list" 
				:current="current" 
				@change="tabsChange" 
				:is-scroll="false"
				bg-color="#eaeaea"
				gutter="80"/>
				<swiper  class="swiperbox" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;">
							<u-card 
							v-for="(item,index) in allProject"
							:key="index"
							margin="10rpx 20rpx 30rpx 20rpx" 
							:body-style="bodyStyle" 
							:foot-style="footStyle"
							:head-style="headStyle">
								<view slot="head">
									<u-image height="300" :src="item.img"
										mode="aspectFill" />
								</view>
								<view slot="body" class="card-foot">
									<view class="all-card-title">{{item.title}}</view>
									<view class="u-flex u-line-2 all-card-sub-title">{{item.subTitle}}</view>
								</view>
								<view slot="foot" class="card-foot">
									<view class="card-foot u-padding-0">
										<u-row  class="u-rela u-flex u-flex-nowrap">
											<u-col span="24">
												<view class=" u-flex u-flex-nowrap u-padding-0">
													<view style="font-size: 28rpx;color: #1989FA;">
														<text>￥{{item.price}}</text>
													</view>
													<view style="text-decoration:line-through;margin-left: 10rpx;">
														<p>￥{{item.originalPrice}}</p>
													</view>
													<view style="margin-left: 20rpx;">
														<p>已预约:{{item.reserved}}</p>
													</view>
													<view style="margin-left: 20rpx;">
														<p>剩余:{{item.balance}}</p>
													</view>
												</view>
												<view class="u-abso" style="right: 2%;top: -8rpx;">
													<u-button @click="submit(item)" style="" shape="circle" size="mini" type="primary">点击预约</u-button>
												</view>
											</u-col>
										</u-row>
									</view>
								</view>
							</u-card>
						</scroll-view>
					</swiper-item>
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;">
							<u-card 
							v-for="(item,index) in allProject"
							v-if="item.id == 2"
							:key="index"
							margin="10rpx 20rpx 30rpx 20rpx" 
							:body-style="bodyStyle" 
							:foot-style="footStyle"
							:head-style="headStyle">
								<view slot="head">
									<u-image height="300" :src="item.img"
										mode="aspectFill" />
								</view>
								<view slot="body" class="card-foot">
									<view class="all-card-title">{{item.title}}</view>
									<view class="u-flex u-line-2 all-card-sub-title">{{item.subTitle}}</view>
								</view>
								<view slot="foot" class="card-foot">
									<view class="card-foot u-padding-0">
										<u-row  class="u-rela u-flex u-flex-nowrap">
											<u-col span="24">
												<view class=" u-flex u-flex-nowrap u-padding-0">
													<view style="font-size: 28rpx;color: #1989FA;">
														<text>￥{{item.price}}</text>
													</view>
													<view style="text-decoration:line-through;margin-left: 10rpx;">
														<p>￥{{item.originalPrice}}</p>
													</view>
													<view style="margin-left: 20rpx;">
														<p>已预约:{{item.reserved}}</p>
													</view>
													<view style="margin-left: 20rpx;">
														<p>剩余:{{item.balance}}</p>
													</view>
												</view>
												<view class="u-abso" style="right: 2%;top: -8rpx;">
													<u-button @click="submit(item)" style="" shape="circle" size="mini" type="primary">点击预约</u-button>
												</view>
											</u-col>
										</u-row>
									</view>
								</view>
							</u-card>
						</scroll-view>
					</swiper-item>
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;">
							<u-card 
							v-for="(item,index) in allProject"
							v-if="item.id == 2"
							:key="index"
							margin="10rpx 20rpx 30rpx 20rpx" 
							:body-style="bodyStyle" 
							:foot-style="footStyle"
							:head-style="headStyle">
								<view slot="head">
									<u-image height="300" :src="item.img"
										mode="aspectFill" />
								</view>
								<view slot="body" class="card-foot">
									<view class="all-card-title">{{item.title}}</view>
									<view class="u-flex u-line-2 all-card-sub-title">{{item.subTitle}}</view>
								</view>
								<view slot="foot" class="card-foot">
									<view class="card-foot u-padding-0">
										<u-row  class="u-rela u-flex u-flex-nowrap">
											<u-col span="24">
												<view class=" u-flex u-flex-nowrap u-padding-0">
													<view style="font-size: 28rpx;color: #1989FA;">
														<text>￥{{item.price}}</text>
													</view>
													<view style="text-decoration:line-through;margin-left: 10rpx;">
														<p>￥{{item.originalPrice}}</p>
													</view>
													<view style="margin-left: 20rpx;">
														<p>已预约:{{item.reserved}}</p>
													</view>
													<view style="margin-left: 20rpx;">
														<p>剩余:{{item.balance}}</p>
													</view>
												</view>
												<view class="u-abso" style="right: 2%;top: -8rpx;">
													<u-button @click="submit(item)" style="" shape="circle" size="mini" type="primary">点击预约</u-button>
												</view>
											</u-col>
										</u-row>
									</view>
								</view>
							</u-card>
						</scroll-view>
					</swiper-item>
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;">
							<u-card 
							v-for="(item,index) in allProject"
							v-if="item.id == 2"
							:key="index"
							margin="10rpx 20rpx 30rpx 20rpx" 
							:body-style="bodyStyle" 
							:foot-style="footStyle"
							:head-style="headStyle">
								<view slot="head">
									<u-image height="300" :src="item.img"
										mode="aspectFill" />
								</view>
								<view slot="body" class="card-foot">
									<view class="all-card-title">{{item.title}}</view>
									<view class="u-flex u-line-2 all-card-sub-title">{{item.subTitle}}</view>
								</view>
								<view slot="foot" class="card-foot">
									<view class="card-foot u-padding-0">
										<u-row  class="u-rela u-flex u-flex-nowrap">
											<u-col span="24">
												<view class=" u-flex u-flex-nowrap u-padding-0">
													<view style="font-size: 28rpx;color: #1989FA;">
														<text>￥{{item.price}}</text>
													</view>
													<view style="text-decoration:line-through;margin-left: 10rpx;">
														<p>￥{{item.originalPrice}}</p>
													</view>
													<view style="margin-left: 20rpx;">
														<p>已预约:{{item.reserved}}</p>
													</view>
													<view style="margin-left: 20rpx;">
														<p>剩余:{{item.balance}}</p>
													</view>
												</view>
												<view class="u-abso" style="right: 2%;top: -8rpx;">
													<u-button @click="submit(item)" style="" shape="circle" size="mini" type="primary">点击预约</u-button>
												</view>
											</u-col>
										</u-row>
									</view>
								</view>
							</u-card>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		<my-tabbar></my-tabbar>
	</view>
</template>-->
<template>
	<view>
		<view class="header">
		  <u-button @click="goHome" shape="circle" size="mini" type="default">返回首页</u-button>

		</view>
		<my-navbar></my-navbar>
		<view class="warp">
			<u-tabs-swiper 
				ref="uTabs" 
				:list="list" 
				:current="current" 
				@change="tabsChange" 
				:is-scroll="false"s
				bg-color="#eaeaea"
				gutter="80"
			/>
			<swiper class="swiperbox" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<!-- 全部项目 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<u-card 
							v-for="(item, index) in allProject" 
							:key="index"
							margin="10rpx 20rpx 30rpx 20rpx" 
							:body-style="bodyStyle" 
							:foot-style="footStyle"
							:head-style="headStyle">
							<view slot="head">
								<u-image height="300" :src="item.img" mode="aspectFill" />
							</view>
							<view slot="body" class="card-foot">
								<view class="all-card-title">{{ item.title }}</view>
								<view class="u-flex u-line-2 all-card-sub-title">{{ item.subTitle }}</view>
							</view>
							<view slot="foot" class="card-foot">
								<view class="card-foot u-padding-0">
									<u-row class="u-rela u-flex u-flex-nowrap">
										<u-col span="24">
											<view class="u-flex u-flex-nowrap u-padding-0">
												<view style="font-size: 28rpx;color: #1989FA;">
													<text>￥{{ item.price }}</text>
												</view>
												<view style="text-decoration:line-through;margin-left: 10rpx;">
													<p>￥{{ item.originalPrice }}</p>
												</view>
											</view>
											<view class="u-abso" style="right: 2%;top: -8rpx;">
												<u-button @click="submit(item)" shape="circle" size="mini" type="primary">点击预约</u-button>
											</view>
										</u-col>
									</u-row>
								</view>
							</view>
						</u-card>
					</scroll-view>
				</swiper-item>

				<!-- 牙齿种植 Tab -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<u-card 
							v-for="(item, index) in allProject" 
							v-if="item.type === '牙齿种植'" 
							:key="index"
							margin="10rpx 20rpx 30rpx 20rpx" 
							:body-style="bodyStyle" 
							:foot-style="footStyle"
							:head-style="headStyle">
							<view slot="head">
								<u-image height="300" :src="item.img" mode="aspectFill" />
							</view>
							<view slot="body" class="card-foot">
								<view class="all-card-title">{{ item.title }}</view>
								<view class="u-flex u-line-2 all-card-sub-title">{{ item.subTitle }}</view>
							</view>
							<view slot="foot" class="card-foot">
								<view class="card-foot u-padding-0">
									<u-row class="u-rela u-flex u-flex-nowrap">
										<u-col span="24">
											<view class="u-flex u-flex-nowrap u-padding-0">
												<view style="font-size: 28rpx;color: #1989FA;">
													<text>￥{{ item.price }}</text>
												</view>
												<view style="text-decoration:line-through;margin-left: 10rpx;">
													<p>￥{{ item.originalPrice }}</p>
												</view>
											</view>
											<view class="u-abso" style="right: 2%;top: -8rpx;">
												<u-button @click="submit(item)" shape="circle" size="mini" type="primary">点击预约</u-button>
											</view>
										</u-col>
									</u-row>
								</view>
							</view>
						</u-card>
					</scroll-view>
				</swiper-item>

				<!-- 牙齿纠正 Tab -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<u-card 
							v-for="(item, index) in allProject" 
							v-if="item.type === '牙齿纠正'" 
							:key="index"
							margin="10rpx 20rpx 30rpx 20rpx" 
							:body-style="bodyStyle" 
							:foot-style="footStyle"
							:head-style="headStyle">
							<view slot="head">
								<u-image height="300" :src="item.img" mode="aspectFill" />
							</view>
							<view slot="body" class="card-foot">
								<view class="all-card-title">{{ item.title }}</view>
								<view class="u-flex u-line-2 all-card-sub-title">{{ item.subTitle }}</view>
							</view>
							<view slot="foot" class="card-foot">
								<view class="card-foot u-padding-0">
									<u-row class="u-rela u-flex u-flex-nowrap">
										<u-col span="24">
											<view class="u-flex u-flex-nowrap u-padding-0">
												<view style="font-size: 28rpx;color: #1989FA;">
													<text>￥{{ item.price }}</text>
												</view>
												<view style="text-decoration:line-through;margin-left: 10rpx;">
													<p>￥{{ item.originalPrice }}</p>
												</view>
											</view>
											<view class="u-abso" style="right: 2%;top: -8rpx;">
												<u-button @click="submit(item)" shape="circle" size="mini" type="primary">点击预约</u-button>
											</view>
										</u-col>
									</u-row>
								</view>
							</view>
						</u-card>
					</scroll-view>
				</swiper-item>

				<!-- 其他 Tab -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<u-card 
							v-for="(item, index) in allProject" 
							v-if="item.type === '其他'" 
							:key="index"
							margin="10rpx 20rpx 30rpx 20rpx" 
							:body-style="bodyStyle" 
							:foot-style="footStyle"
							:head-style="headStyle">
							<view slot="head">
								<u-image height="300" :src="item.img" mode="aspectFill" />
							</view>
							<view slot="body" class="card-foot">
								<view class="all-card-title">{{ item.title }}</view>
								<view class="u-flex u-line-2 all-card-sub-title">{{ item.subTitle }}</view>
							</view>
							<view slot="foot" class="card-foot">
								<view class="card-foot u-padding-0">
									<u-row class="u-rela u-flex u-flex-nowrap">
										<u-col span="24">
											<view class="u-flex u-flex-nowrap u-padding-0">
												<view style="font-size: 28rpx;color: #1989FA;">
													<text>￥{{ item.price }}</text>
												</view>
												<view style="text-decoration:line-through;margin-left: 10rpx;">
													<p>￥{{ item.originalPrice }}</p>
												</view>
												
											</view>
											<view class="u-abso" style="right: 2%;top: -8rpx;">
												<u-button @click="submit(item)" shape="circle" size="mini" type="primary">点击预约</u-button>
											</view>
										</u-col>
									</u-row>
								</view>
							</view>
						</u-card>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				headStyle:{
					backgroundColor: '#ffffff',
					color:'#000000',
					padding:'10rpx 0rpx'
				},
				bodyStyle:{
					backgroundColor: '#f0f0f0',
					color:'#000000',
					padding:'10rpx 20rpx'
				},
				footStyle:{
					backgroundColor: '#f0f0f0',
					color:'#232323',
					fontSize:'25rpx',
					padding:'15rpx'
				},
				list: [{
					name: '全部'
				}, {
					name: '牙齿种植'
				}, {
					name: '牙齿纠正'
				}, {
					name: '其他'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				allProject:[
					{
						id:'1',
						type:'',
						img:require("@/static/3D超薄瓷贴面.jpg"),
						title:'3D超薄瓷贴面',
						subTitle:'3M陶瓷托槽，一般预计正畸疗程1-2年左右，主要看病人畸形程度',
						price:'5000.00',
						originalPrice:'10000',
						reserved:'15',
						balance:'85'
					},{
						id:'1',
						type:'牙齿纠正',
						img:require("@/static/美学牙齿纠正治疗.jpg"),
						title:'美学牙齿纠正治疗',
						subTitle:'3M陶瓷托槽，一般预计正畸疗程1-2年左右，主要看病人畸形程度',
						price:'3000.00',
						originalPrice:'8000',
						reserved:'5',
						balance:'95'
					},{
						id:'2',
						type:'牙齿种植',
						img:require("@/static/现代化种植牙技术.jpg"),
						title:'现代化种植牙技术',
						subTitle:'3M陶瓷托槽，一般预计正畸疗程1-2年左右，主要看病人畸形程度',
						price:'8000.00',
						originalPrice:'14000',
						reserved:'1',
						balance:'100'
					},
					{
						id: '3',
						type: '其他',
						img: require("@/static/牙齿补牙.jpg"), // Add an image for the dental filling service
						title: '牙齿补牙',
						subTitle: '使用高品质树脂或金属材料进行牙齿修复，恢复牙齿功能和外观',
						price: '400.00',
						originalPrice: '600',
						reserved: '30',
						balance: '70'
					},
					{
						id: '3',
						type: '其他',
						img: require("@/static/牙齿清洁.jpg"), // Add an image for the teeth cleaning service
						title: '牙齿清洁',
						subTitle: '专业清洁去除牙齿表面污垢及牙结石，预防牙齿问题',
						price: '100.00',
						originalPrice: '200',
						reserved: '50',
						balance: '150'
					}
				]
			}
		},
		methods: {
			goHome() {
			    uni.navigateTo({
			        url: '/pages/login/login' // 确保路径正确
			    });
			},
            tabsChange(index) {
                this.swiperCurrent = index;
            },
            // swiper-item左右移动，通知tabs的滑块跟随移动
            transition(e) {
                let dx = e.detail.dx;
                this.$refs.uTabs.setDx(dx);
            },
            // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
            // swiper滑动结束，分别设置tabs和swiper的状态
            animationfinish(e) {
                let current = e.detail.current;
                this.$refs.uTabs.setFinishCurrent(current);
                this.swiperCurrent = current;
                this.current = current;
            },
			submit(e){
				this.$u.route('/pages/detail/detail',{
					id:e.id,
					img:e.img,
					title:e.title,
					subTitle:e.subTitle,
					price:e.price,
					originalPrice:e.originalPrice,
					
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.header {
	  position: absolute;
	  top: 20rpx; /* 可根据需要调整 */
	  left: 20rpx; /* 可根据需要调整 */
	  z-index: 999; /* 确保按钮在最上层 */
	}
	.swiperbox{
		//height: 625px;
		 flex: 1;
		  height: auto; /* 让swiper-box根据内容自适应高度 */
		
	}
	.warp{
		 display: flex;
		  flex-direction: column;
		  height: 100vh;
		//width: 100%;
	}
	.swiper-item{
		height: 100%;
		background-color: #f4f4f4;
	}
	
	// 全部页面卡片字体
	.all-card-title{
		font-size: 30rpx;
		
	}
	.all-card-sub-title{
		
		margin-top: 15rpx;
		font-size: 26rpx;
	}
	.all-card-foot{
		
	}

	.card-foot{
		padding: 0rpx 0rpx;
	}
	
</style>
